import React, { Component, lazy, Suspense } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import Nav from './components/Nav/Nav'
import Header from './components/Header/Header'
// import Home from './pages/Home/Home'
// import Shop from './pages/Shop/Shop'
// import About from './pages/About/About'

import './app.css'

const Home = lazy(() => import('./pages/Home/Home'))
const Shop = lazy(() => import('./pages/Shop/Shop'))
const About = lazy(() => import('./pages/About/About'))

export default class App extends Component {

    state = {
        navList: [
            { to: '/home', name: 'home' },
            { to: '/shop', name: 'shop' },
            { to: '/about', name: 'about' },
        ]
    }

    commonRouter = () => {
        console.log(this.props)

    }

    render() {
        return (
            <div className="App">
                <h1>React Router Demo</h1>
                <Header />
                <div className="main">
                    <ul className="nav">
                        {/* 路由链接 */}
                        {
                            this.state.navList.map((v, i) => {
                                return <li key={i}><Nav {...v} >{v.name}</Nav></li>
                            })
                        }
                    </ul>
                    <div className="content">
                        {/* 懒加载包裹 */}
                        <Suspense fallback={<h1>loading...</h1>}>
                            {/* 注册路由 */}
                            <Switch>
                                <Route path="/home" component={Home} />
                                <Route path="/shop" component={Shop} />
                                <Route path="/about" component={About} />
                                {/* 路由重定向 */}
                                <Redirect to="/home" />
                            </Switch>
                        </Suspense>
                    </div>
                </div>
            </div>
        )
    }
}